<template>
  <div>
    <!-- 头部搜索框 -->
    <div class="common-layout">
      <el-form class="serchBox">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="课程编号">
              <el-input placeholder="请输入" v-model="pageParams.courseNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程名称">
              <el-input placeholder="请输入" v-model="pageParams.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="适应人群">
              <el-select placeholder="" v-model="pageParams.applicablePerson" style="width: 263px">
                <el-option v-for="item in crowdIpt" :key="item.id" :value="item.content">{{
                  item.content
                }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                style="width: 263px"
                :width="200"
                v-model="pageParams.createTime"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="课程学科">
              <el-select placeholder="" v-model="pageParams.subject" style="width: 263px">
                <el-option v-for="item in disciplineIpt" :key="item.id" :value="item.content">{{
                  item.content
                }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-top: 25px">
            <el-button class="iptSerch" @click="iptSerch">搜索</el-button>
            <el-button class="iptZC" @click="iptClear">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 添加按钮 -->
    <div class="addipt">
      <el-button class="addbtn" @click="addCourseList">+添加课程</el-button>
    </div>
    <!-- 课程表单 -->
    <el-table
      ref="multipleTableRef"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="courseNo" label="课程编号" width="180" />
      <el-table-column prop="subject" label="课程学科" width="180" />
      <el-table-column prop="name" label="课程名称" width="180" />
      <el-table-column prop="price" label="价格（元）" width="180" />
      <el-table-column prop="applicablePerson" label="适应人群" width="180" />
      <el-table-column prop="info" label="课程介绍" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column prope="" label="操作" width="150">
        <template #default="scope">
          <el-button
            style="color: #05cc95"
            type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm title="确认删除该数据?" @confirm="handleConfirm(scope.$index, scope.row)">
            <template #reference>
              <el-button
                style="color: #fd7065"
                size="mini"
                type="text"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="sum"
      style="margin-left: 25%"
    >
    </el-pagination>
    <span class="select">已选择{{ select }}项</span>
  </div>
  <!-- 新增弹窗 -->
  <add-course
    ref="addRef"
    :crowdIpt="crowdIpt"
    :disciplineIpt="disciplineIpt"
    @add-addList="getTabelApi"
    @dlt-addList="iptClear"
  ></add-course>
</template>
<script setup>
import addCourse from './add-course.vue'
import { ref, onMounted } from 'vue'
import { getTabelList, cxTabelCourse, dltTabelCourse } from '@/api/course'
import { ElMessage } from 'element-plus'
const handleSizeChange = (index)=>{
console.log(index);
pageParams.value.size = index
getTabelApi()
}
const handleCurrentChange = (index)=>{
console.log(index);
pageParams.value.page = index
getTabelApi()
}
// 接收弹窗方法
const addRef = ref(null)
// 添加课程按钮
const addCourseList = () => {
  addRef.value.dialogStatus()
}
//表格数据
const list = ref([])
//总数
const sum = ref(null)
//分页
const pageParams = ref({
  page: 1,
  size: 10,
  selection: '',
  name: '',
  applicablePerson: '',
  createTime: '',
  subject: '',
  price: 0,
  info: '',
  id:''
})

// 获取表格数据
onMounted(() => {
  getTabelApi()
  discipline()
  crowd()
})
const getTabelApi = async () => {
  const { data, total } = await getTabelList(pageParams.value)
  sum.value = total
  list.value = data
  console.log(list.value)
}
//下拉框数据
// 课程学科
const disciplineIpt = ref([])
const discipline = async () => {
  const { data } = await cxTabelCourse(19)
  disciplineIpt.value = data
}
// 适应人群
const crowdIpt = ref([])
const crowd = async () => {
  const { data } = await cxTabelCourse(17)
  crowdIpt.value = data
}
//单选全选数据
const select = ref(0)
const handleSelectionChange = (selection) => {
  select.value = selection.length
}
//编辑
const handleEdit = (index, row) => {
  addRef.value.dialogStatus()
 addRef.value.putaddlist =  row
//  console.log(addRef.value.putaddlist);
}
//删除
const handleConfirm = async (index, row) => {
  await dltTabelCourse(row.id)
  await getTabelApi()
  ElMessage({
    message: '删除课程成功！',
    type: 'success'
  })
}
// 搜索
const iptSerch = async () => {
 await getTabelApi()
}
// 重置
const iptClear =async () => {
  pageParams.value = {
    page: 1,
    size: 10,
    selection: '',
    name: '',
    applicablePerson: '',
    createTime: '',
    subject: '',
    price: null,
    info: ''
  }
  await getTabelApi()
}
</script>
<style scoped>
::v-deep .el-input__wrapper{
  width: 280px;
  height: 40px;
  background-color: #f3f3f3;
}
.common-layout {
  background-color: #fff;
  padding: 24px 0 0 20px;
}
.iptSerch {
  width: 94px;
  height: 40px;
  border-radius: 20px;
  background-color: #00cd95;
  color: #fff;
}
.iptZC {
  width: 94px;
  height: 40px;
  border-radius: 20px;
  color: #333;
  background-color: #eaeaea;
}
.addbtn {
  width: 110px;
  height: 40px;
  border-radius: 20px;
  margin-left: 20px;
  background-color: #fe7068;
  color: #fff;
}
.el-form-item {
  display: block;
}
.el-input {
  width: 263px;
  height: 40px;
  margin-right: 44px;
}
.el-option {
  height: 40px;
}
.addipt {
  height: 83px;
  background-color: #f9f9f9;
  line-height: 83px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
